{extend name="base" /}{block name="seo"}
<title>我的消息 - {$site.name}</title>
<meta name="keywords" content="{$site.keywords}">
<meta name="description" content="{$site.description}">
{/block}
{block name="css"}
<link href="__HOME__/css/user.css" rel="stylesheet" type="text/css">
<style>
    .read{
        color: #9a9a9a;
    }
    .layui-collapse{
        border: none;
    }
    .layui-colla-title {
        background-color:#fff;
    }
    .layui-show{
        border: none;
        background-color:#f4f5f9;
    }
    .layui-icon {

        right: 15px !important;
    }
</style>
{/block}
{block name="body"}
<div class="container">
    <div class="user">
        {include file="index/menu"}


        <div class="user-stow user-box fl">
            <div class="title">
                消息管理
                <span>您有 <b id="count">0</b> 条消息。</span>
            </div>
            <div class="layui-tab layui-tab-brief" lay-filter="tabBrief">
                <ul class="layui-tab-title">
                    <li class="layui-this" data-type="0">系统消息</li>
                    <li data-type="1">评论消息</li>
                    <li data-type="2">回复消息</li>
                </ul>

                <div style="padding: 10px">
                    <div class="layui-collapse" id="page_body_id" lay-filter="test" style="min-height: 430px" lay-accordion>

                    </div>

                    <p id="page_id" style="text-align: center"></p>
                </div>

            </div>


        </div>
    </div>

    {/block}
    {block name="script"}
    <script id="page_template_id" type="text/html">

        {{# layui.each(d.list, function(index, item){ }}
        <div class="layui-colla-item">
            <h2 class="layui-colla-title {{#if( item.has_read){ }} read {{#}}}" data-id="{{item.id}}" data-read="{{item.has_read}}">{{item.title}}<span style="float: right">{{ item.create_time }}</span></h2>
            <div class="layui-colla-content">
                {{item.content}}
            </div>
        </div>
        {{# }); }}
    </script>
    <script>
        layui.use(["element"], function () {
            var element = layui.element;
            renderPageData('/user/message/messages', "page_id", "page_template_id",
                "#page_body_id", 'count', {'type': 0});

            element.on('collapse(test)', function (data) {
                // layer.msg('展开状态：' + data.show);
                var that=$(this);
                $msgId=that.data('id');
                if(that.data('read')==0&&data.show) {
                    request({
                        url: '/user/message/read', data: {id: $msgId}, loading: false, success: function (res) {
                            if (res.code == 1) {
                                that.attr('data-read', '1');
                                that.addClass('read');
                                element.render();
                            }
                        }
                    });
                }
                $('.layui-colla-title').css('background','#fff');
                if(data.show){
                    that.css('background','#f4f5f9');
                }else{
                    // that.css('background','#fff');
                }
            });
            element.on('tab(tabBrief)', function (data) {
                var type = $(this).data('type');
                renderPageData('/user/message/messages', "page_id", "page_template_id",
                    "#page_body_id", 'count', {'type': type});
            });
        });

    </script>
    {/block}
